<template>
	<view class="content">
		<view class="order-tp">
			<view class="order-bg">
				<text>{{order_info.status_name}}</text>
			</view>
			<view class="order-state">
				<view class="order-li" :class="order_info.status_history[2] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-a-daijiedan1"></text>
					</view>
					<view class="order-name">技师接单</view>
				</view>
				<view class="order-li" :class="order_info.status_history[3] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-toyCar-fill"></text>
					</view>
					<view class="order-name">技师出发</view>
				</view> <!-- 电话报错 -->
				
				<view class="order-li" :class="order_info.status_history[4] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-qiandaoquhao"></text>
					</view>
					<view class="order-name">技师到达</view>
				</view>
				<view class="order-li" :class="order_info.status_history[5] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-noun_massage_2460811"></text>
					</view>
					<view class="order-name">开始服务</view>
				</view> <!-- 联系异常 -->
				<view class="order-li" :class="order_info.status_history[6] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-icon"></text>
					</view>
					<view class="order-name">服务完成</view>
				</view>
			</view>
		</view>

		<view class="tech-eva-con">
			<view class="place-rem-tit">
				<text>服务项目</text>
				<text></text>
			</view>
			<block v-for="(item, index) in order_info.order_detail" :key="index">
				<view class="service">
					<view class="ser-img" :style="'background-image: url('+item.images+');'"></view>
					<view class="ser-con">
						<view class="ser-tit">
							<text>{{item.title}}</text>
							<text>x{{item.buy_number}}</text>
						</view>
						<view class="ser-des">服务技师：{{order_info.techn_info.nickname}}</view>
						<view class="ser-pri">
							<view class="ser-pri-lf">
								<text>{{item.duration}}分钟</text>
								<text>{{item.price}}</text>
								<text></text>
							</view>
						</view>
					
					</view>
				</view>
			</block>	
		</view>

		<view class="place-addr">
			<view class="place-rem-tit">
				<text>用户信息</text>
				<text class="dianhua" v-if="order_info.contact_type == 1" @click="contactFun"><view class="tudianhua"></view>联系客户</text>
				<text>距您{{order_info.distance}}km</text>
			</view>
			<view class="place-name">
				<text>{{order_info.order_address.name}}</text>
				<text v-if="order_info.contact_type==1">{{order_info.order_address.star_mobile}}</text>
				<text>查看标签</text>
			</view>
			<view class="place-addr-con">
				<text>{{order_info.order_address.address}}{{order_info.order_address.address_des}}</text>
				<text class="iconfont icon-dingwei" @click="goPlace(order_info.order_address.lng, order_info.order_address.lat)">导航去</text>
			</view>
			<view class="place-addr-con">
				<text>客户备注:</text>
				
				<text>{{order_info.user_note? order_info.user_note : '无'}}</text>
			</view>
			
			<view class="place-addr-con">
				<text v-if="order_info.status >= 6" class="dianhua" style="color:white;margin-left: 0;margin-top: 6rpx;" @click="lahei">拉黑客户</text>
			</view>
		</view>

		<view class="place-time">
			<view class="place-time-tp">
				<view class="place-time-name">下单时间</view>
				<view class="place-time-con">
					<text>{{order_info.add_time_time}}</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">预约服务时间</view>
				<view class="place-time-con">
					<text>{{order_info.pre_start_time_time}}</text>
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">预计结束时间</view>
				<view class="place-time-con">
					<text>{{order_info.pre_end_time_time}}</text>
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">服务时长</view>
				<view class="place-time-con">
					<text>{{order_info.buy_number_duration}}分钟</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">服务费用</view>
				<view class="place-time-con">
					<text>￥{{order_info.price}}</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">出行方式</view>
				<view class="place-time-con">
					<text>出租车</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">车费</view>
				<view class="place-time-con">
					<text>￥{{order_info.travel_price}}</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">优惠券</view>
				<view class="place-time-con">
					<text>￥{{order_info.preferential_price}}</text>
				</view>
			</view>
			<view class="place-time-tp" style="display:inline-block;">
				<view class="place-time-name place-time-name_sm">{{order_info.balance}}</view>
				<!-- <view class="place-time-con">
					<text>{{order_info.payment_name}}支付</text>
				</view> -->
			</view>
			
			<view class="place-time-tp" style="">
				<view class="place-time-name" style="text-align: right;color:red">本单收益:￥{{order_info.techn_shou}}</view>
				<!-- <view class="place-time-con">
					<text>{{order_info.payment_name}}支付</text>
				</view> -->
			</view>
			
			<!-- <view v-for="(item,index) in order_info.balance_list" :key="index" class="place-time-tp">
				<view class="place-time-name">{{item.msg}}{{item.divide_into}}%</view>
				<view class="place-time-con">
					<text>-￥{{item.no_money}}</text>
				</view>
			</view> -->
			
		</view>

		<view class="order-plan">
			<view class="order-no">
				<text>订单编号：</text>
				<text>{{order_info.order_no}}</text>
				<text @click="copyOrderNoFun(order_info.order_no)">复制</text>
			</view>
			<view class="tra-con">
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[2] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">技师接单</view>
						<view class="order-t">
							<block v-if="order_info.status_history[2]">
								{{order_info.meet_time_time}}
							</block>
							<block v-else>
								状态未更新
							</block>
						</view>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[3] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">技师出发</view>
						<block v-if="order_info.status_history[3]">
							<view class="order-t">{{order_info.leave_time_time}}</view>
							<block v-if="order_info.status_history[3]['extension_data'] && order_info.status_history[3]['extension_data']['address']">
								<view class="order-d">
									<text class="iconfont icon-dizhi">{{order_info.status_history[3]['extension_data']['address']['address']}}</text>
								</view>
							</block>
						</block>
						<block v-else>
							<view class="order-t">状态未更新</view>
						</block>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[4] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">技师到达</view>
						<block v-if="order_info.status_history[4]">
							<view class="order-t">{{order_info.arrive_time_time}}</view>
							<block v-if="order_info.status_history[4]['extension_data'] && order_info.status_history[4]['extension_data']['images']">
								<view class="order-m">
									<block v-for="(item, index) in order_info.status_history[4]['extension_data']['images']" :key="index">
									    <image :src="app_url+item" mode="aspectFill"></image>
								    </block>
								</view>
							</block>
							<block v-if="order_info.status_history[4]['extension_data'] && order_info.status_history[4]['extension_data']['address']">
								<view class="order-d">
									<text class="iconfont icon-dizhi">{{order_info.status_history[4]['extension_data']['address']['address']}}</text>
								</view>
							</block>
						</block>
						<block v-else>
							<view class="order-t">状态未更新</view>
						</block>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[5] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">开始服务</view>
						<view class="order-t">
							<block v-if="order_info.status_history[5]">
								{{order_info.service_time_time}}
							</block>
							<block v-else>
								状态未更新
							</block>
						</view>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[6] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">服务完成</view>
						<block v-if="order_info.status_history[6]">
							<view class="order-t">{{order_info.over_time_time}}</view>
							<block v-if="order_info.status_history[6]['extension_data'] && order_info.status_history[6]['extension_data']['address']">
								<view class="order-d">
									<text class="iconfont icon-dizhi">{{order_info.status_history[6]['extension_data']['address']['address']}}</text>
								</view>
							</block>
						</block>
						<block v-else>
							<view class="order-t">状态未更新</view>
						</block>
					</view>
				</view>
			</view>
		</view>

		<view class="h110"></view>

		<view class="tech-order">
			<view class="tech-price">
				<text>合计：</text>
				<text>￥{{order_info.total_price}}</text>
			</view>
			
			<view class="tech-btn">
				<!-- noMeetFun -->
				<text v-if="order_info.status > 0 && order_info.status < 6" @click="open_bbei()">报备</text>
				<!-- <text @click="open_bbei()">报备</text> -->
				<text class="tech-act" v-if="order_info.status == 1" @click="onRefuse(1)">拒绝接单</text>
				<text v-if="order_info.status == 1" @click="yesMeetFun">立即接单</text>
				
				<text v-if="order_info.status == 2" @click="onRefuse(2)">联系异常</text>
				<text v-if="order_info.status == 2" @click="setOutViewShow">确认出发</text>
                
				<text v-if="order_info.status == 3" @click="arriveViewShow">确认到达</text>

				<text v-if="order_info.status == 4" @click="onContact">转补单</text>
				<text v-if="order_info.status == 4" @click="startService">开始服务</text>
				
				<!--<text v-if="order_info.status >= 1 && order_info.status <= 4" @click="contactFun">电话</text>-->

				<text v-if="order_info.status == 5" @click="overViewShow">完成服务</text>
				
				<text v-if="order_info.techn_is_repair == 1 && order_info.techn_repair_sid == 0" @click="repairFun">补交罚单</text>
			</view>
		</view>
		
        <!-- 确认出发弹窗 -->		
		<view class="order-pop" :hidden="set_out_view_hidden">
			<view class="pop-area">
				<view class="pop-tit">确认出发</view>
				<view class="pop-con">
					当前位置：{{techn_last_address.address}}
				</view>
				<view class="pop-btn">
					<text @click="setOutViewHide">取消</text>
					<text @click="leaveFun">确认</text>
				</view>
			</view>
		</view>

        <!-- 确认到达弹窗-->
		<view class="order-pop" :hidden="arrive_view_hidden">
			<view class="pop-area">
				<view class="pop-tit">确认到达</view>
				<view class="pop-con">
					<view class="feed-tit">拍照打卡：<text>自拍（着工装工牌）</text></view>
					<view class="feed-con">
						<block v-for="(item, index) in techn_last_images" :key="index">
							<view class="apply-img">
								<image :src="app_url+item" mode="aspectFill" class="photo"></image>
								<image src="../../static/del.png" mode="widthFix" class="del" @click="delImg(index)"></image>
							</view>
						</block>						
						<view class="apply-img" @click="uploadImg" v-if="techn_last_images.length < 3">
						  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
						</view>	
					</view>
					当前位置：{{techn_last_address.address}}
				</view>
				<view class="pop-btn">
					<text @click="arriveViewHide">取消</text>
					<text @click="arriveFun">确认</text>
				</view>
			</view>
		</view>
		
        <!-- 确认完成弹窗 -->
		<view class="order-pop" :hidden="over_view_hidden">
			<view class="pop-area">
				<view class="pop-tit">确认完成</view>
				<view class="pop-con">
					<view class="place-rem-tit">
						<text>客户等级</text>
						<text></text>
					</view>
					<view class="eva-star">
						<text :class="yixing" @click="xunxing(1)">1星</text>
						<text :class="erxing" @click="xunxing(2)">2星</text>
						<text :class="sanxing" @click="xunxing(3)">3星</text>
						<text :class="sixing" @click="xunxing(4)">4星</text>
						<text :class="wuxing" @click="xunxing(5)">5星</text>
					</view>
					<view class="place-rem-tit">
						<text>用户来源</text>
						<text></text>
					</view>
					<view class="eva-star">
						<text  :class="douyin" v-for="(item,index) in biaoqian"  :key="index"   @click="laiyuan(item.type_id)">{{item.name}}</text>
					<!-- 	<text :class="dianti" @click="laiyuan(2)">电梯广告</text>
						<text :class="jiudian" @click="laiyuan(3)">酒店广告</text>
						<text :class="pengyou" @click="laiyuan(4)">朋友推荐</text>
						<text :class="jishi" @click="laiyuan(5)">技师推荐</text>
						<text :class="jishi" @click="laiyuan(6)">饭店广告</text>
						<text :class="jishi" @click="laiyuan(7)">水桶广告</text>
						<text :class="jishi" @click="laiyuan(8)">出租车广告</text> -->
					</view>
					当前位置：{{techn_last_address.address}}
				</view>
				<view class="pop-btn">
					<text @click="overViewHide">取消</text>
					<text @click="overFun">确认</text>
				</view>
			</view>
		</view>

		<popup-layer ref="popupRef" :direction="'top'">
			<view class="box">
				<view class="mtt">
					<view class="money">{{abnormalShow?'订单服务结束':'联系异常'}}</view>
				</view>
				<view class="cause">
					<view class="cause_title">{{abnormalShow?'问卷调查':'已等待20分钟'}}</view>
					<!-- <ul v-if="!abnormalShow">
						<li v-for="item,index in causeList" :key="index" :class="causeIndex==index?'cur':''" @click="onCause(index,item.title)">{{item.title}}</li>
					</ul> -->
					<view class="textarea">
						<textarea v-model="causeVal" placeholder="请输入内容~"></textarea>
					</view>
					<view class="but" @click="commission">
						<text>提交</text>
					</view>
					<!-- <view class="unusual" @click="onAbnormal">
						<image src="/static/04.png" mode=""></image>
						<text>联系异常</text>
					</view> -->
				</view>
			</view>
		</popup-layer>
		
		<!-- 拒单 -->
		<view class="" v-show="refuseShow">
			<view class="popup-bg" catchtouchmove="true" @click="refuseShow = false"></view>
			<!-- 拒单 -->
			<view class="popup-cont" v-if="reasonIndex==1">
				<view class="title">拒单</view>
			    <view class="input">
					<textarea type="text" placeholder="请输入拒单原因" placeholder-class="placeholder" v-model="reason"></textarea>
				</view>
				<view class="popup-but">
					<view class="cancel" @click="refuseShow = false">取消</view>
					<view class="define" @click="noMeetFun">确定</view>
				</view>
			</view>
			
			<!-- 电话报错 -->
			<view class="popup-cont" v-else>
				<view class="title">电话报错</view>
			    <view class="input">
					<textarea type="text" placeholder="请输入原因" placeholder-class="placeholder" v-model="feedback"></textarea>
				</view>
				<view class="popup-but">
					<view class="cancel" @click="refuseShow = false">取消</view>
					<view class="define" @click="onDefine">确定</view>
				</view>
			</view>
			
			
		</view>
		<!-- 报备信息 -->
		<view class="popup-cont" v-if="baobei_show == 1">
			<view class="title">报备内容</view>
		    <view class="input">
				<textarea type="text" placeholder="请输入报备内容" placeholder-class="placeholder" v-model="baobei"></textarea>
			</view>
			<view class="popup-but">
				<view class="cancel" @click="baobei_show = 0">取消</view>
				<view class="define" @click="sendMess">确定</view>
			</view>
		</view>
<!-- 客户标签弹窗
		<view class="order-pop">
			<view class="pop-area">
				<view class="pop-tit">客户标签</view>
				<view class="pop-con">
					<view class="eva-star eva-star1">
						<text>1星（5）</text>
						<text>2星（12）</text>
						<text>3星（8）</text>
						<text>4星（9）</text>
						<text>5星（2）</text>
					</view>
				</view>
				<view class="pop-btn">
					<text>关闭</text>
					<text style="display: none;">确认</text>
				</view>
			</view>
		</view>
-->
	
	</view>
</template>

<script>
const app = getApp();
const request = require('../../utils/request');
export default {
    data() {
        return {
			/**
			 * 网址
			 */
			app_url:app.globalData.app_url,
			order_id:'', //订单id
			order_info:{}, //订单详情
			
			techn_last_address:{}, //技师实时地址
			techn_last_images:[], //技师实时图片
			//确认出发弹框显示(默认true隐藏)
			set_out_view_hidden:true,
			//确认到达弹框显示(默认true隐藏)
			arrive_view_hidden:true,
			//完成服务弹框显示(默认true隐藏)
			over_view_hidden:true,
			
			boolShow:true,
			causeList:[],
			causeIndex:-1,
			causeTitle:'',
			causeVal:'',
			abnormalShow:false,
			refuseShow:false,
			reason:'',
			reasonIndex:1,
			feedback:'',
			baobei_show:0,
			baobei:'',
			code:'',
			yixing:'',
			erxing:'',
			sanxing:'',
			sixing:'',
			wuxing:'eva-act',
			douyin:'eva-act',
			dianti:'',
			jiudian:'',
			pengyou:'',
			jishi:'',
			xing:5,
			yuan:1,
			biaoqian:[],
		}
    },
	onLoad(options)
	{
		//console.log(options);
		var that = this;
		if(options.order_id)
		{
			that.order_id = options.order_id;
		}
	},
	onShow()
	{
		var that = this;
		that.load_order_detail(); //加载订单详情
	},
    methods: {
		open_bbei(){
			this.baobei_show = 1;
			console.log(this.baobei_show);
		},
		onRefuse(e){
			this.refuseShow = true;
			this.reasonIndex = e;
		},
		onDefine(){
			var that = this;
			if (!that.feedback) {
				uni.showToast({
					title: '原因不能为空！',
					duration: 1500,
					icon: "none"
				});
				return
			}
			var formData = {
				reason:that.feedback,
				order_id:that.order_id
			};
			request(app.globalData.api_url+'/v1/order/order_err', 'POST', formData).then((res) => {
				if(res.data.code == 0){
					that.load_order_detail(); //加载订单详情
				}else{
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
				that.refuseShow = false;
				that.feedback = '';
				
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				})
			})
		},
		sendMess(){
			var that = this;
			let beibei_content = that.baobei;
			var sendData = {
				content:beibei_content,
				order_id:that.order_id
			}
			request(app.globalData.api_url+'/v1/talk/order_baobei', 'POST', sendData).then((res) => {
				if(res.data.code == 0){
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					})
					that.baobei_show = 0;
					that.baobei = '';
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					})
				}
			})
		},
		commission(){
			if(!this.causeVal){
				uni.showToast({
					title:'请输入内容',
					icon:'none'
				});
				return
			}
			// if(!this.abnormalShow && !this.causeTitle){
			// 	uni.showToast({
			// 		title:'请选择客户来源',
			// 		icon:'none'
			// 	});
			// 	return
			// }
			
			var that = this;
			let formData = {
				order_id:that.order_id,
				techn_last_address:that.techn_last_address,
				// budan_reason:that.abnormalShow?that.causeVal:that.causeTitle,
				budan_reason:that.causeVal,
				// status:that.abnormalShow?5:''
				status:100
			};
			console.log(formData)
			//网络请求
			request(app.globalData.api_url+'/v1/order/over', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					that.load_order_detail(); //加载订单详情
					that.overViewHide(); //服务完成弹出框隐藏
					this.$refs.popupRef.close();// 或者 boolShow = false
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		onAbnormal(){
			this.abnormalShow = !this.abnormalShow;
			this.causeTitle = '';
			this.causeVal = '';
			this.causeIndex = -1;
		},
		
		
		goEvaluate(){
	        uni.navigateTo({
	            url: '/pages/order/evaluate'
	        })
	    },
	    /**
		 * 加载订单详情
		 */
		load_order_detail:function()
		{
			var that = this;
			let order_id = that.order_id;
			//网络请求
			request(app.globalData.api_url+'/v1/order/detail', 'POST', {order_id:order_id}).then((res) => {
				if(res.data.code == 0)
				{
					that.order_info = res.data.data;
					that.causeList = res.data.data.from;
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		onCause(e,t){
			this.causeIndex = e;
			this.causeTitle = t;
		},
		/**
		 * 去导航
		 */
		goPlace:function(lng, lat)
		{
			uni.openLocation({
				latitude:lat*1,
				longitude:lng*1
			});
		},
		/**
		 * 复制订单号
		 */
		copyOrderNoFun:function(order_no)
		{
			uni.setClipboardData({
				data:order_no,
				success:function()
				{
					uni.showToast({
						title:'复制成功',
						icon:'none'
					});
				}
			});
		},
		/**
		 * 立即接单
		 */
		yesMeetFun:function()
		{
			//console.log('立即接单');
			var that = this;
			let formData = {
				order_id:that.order_id
			};
			uni.showModal({
				title: '温馨提示',
				content: '您确定立即接单吗？',
				confirmText: '确认',
				cancelText: '暂不',
				success: (result) => {
					if (result.confirm) {
						//网络请求
						request(app.globalData.api_url+'/v1/order/yes_meet', 'POST', formData).then((res) => {
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
							if(res.data.code == 0)
							{
								that.load_order_detail(); //加载订单详情
							}else
							{
								app.is_login_check(res.data);
								app.is_techn_check(res.data);
							}
						});
					}
				}
			});
		},
		xunxing:function(xing){
			var that = this;
			that.xing = xing;
			that.yixing = '';
			that.erxing = '';
			that.sanxing = '';
			that.sixing = '';
			that.wuxing = '';
			if(xing == 1){
				that.yixing = 'eva-act';
			}
			if(xing == 2){
				that.erxing = 'eva-act';
			}
			if(xing == 3){
				that.sanxing = 'eva-act';
			}
			if(xing == 4){
				that.sixing = 'eva-act';
			}
			if(xing == 5){
				that.wuxing = 'eva-act';
			}
			
			
		},
		laiyuan:function(yuan){
			console.log('来源');
			console.log(yuan);
			var that = this;
			that.yuan = yuan;
			that.douyin = '';
			that.dianti = '';
			that.jiudian = '';
			that.pengyou = '';
			that.jishi = '';
			if(yuan == 1){
				that.douyin = 'eva-act';
			}
			if(yuan == 2){
				that.dianti = 'eva-act';
			}
			if(yuan == 3){
				that.jiudian = 'eva-act';
			}
			if(yuan == 4){
				that.pengyou = 'eva-act';
			}
			if(yuan == 5){
				that.jishi = 'eva-act';
			}
			
			
		},
		/**
		 * 确认出发显示弹出框
		 */
		setOutViewShow:function(){
			var that = this;
			that.locateAddress().then((res) => {
				if(res.data.code == 0)
				{
					//数据
					that.techn_last_address = res.data.data;
				    //弹出框显示
					that.set_out_view_hidden = false;
				}
			});
		},
		/**
		 * 确认出发隐藏弹出框
		 */
		setOutViewHide:function()
		{
			var that = this;
			that.set_out_view_hidden = true;
		},
		/**
		 * 根据坐标获取当前地址信息
		 */
		locateAddress:function(){
			var that = this;
			return new Promise(function(resolve, reject){
				uni.getLocation({
					type:'gcj02',
					success:function(loc_res){
						if(loc_res.errMsg == "getLocation:ok"){
							//console.log(loc_res);
							let lng = loc_res.longitude;
							let lat = loc_res.latitude;
							//参数
							var formData = {
								lng:lng,
								lat:lat
							};
							//网络请求
							request(app.globalData.api_url+'/v1/publics/loc_get_address', 'POST', formData).then((res) => {
								//console.log(res);
								that.biaoqian = res.data.pingjia;
								resolve(res);
							}).catch((err) => {
								reject(err);
							});
						}
					}
				});
			});
		},
		/**
		 * 确认出发提交
		 */
		leaveFun:function()
		{
			//console.log('确认出发提交');
			var that = this;
			let formData = {
				order_id:that.order_id,
				techn_last_address:that.techn_last_address
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/leave', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					that.load_order_detail(); //加载订单详情
					that.setOutViewHide(); //弹框取消
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 确认到达弹出框显示
		 */
		arriveViewShow:function()
		{
			//console.log('确认到达');
			var that = this;
			that.locateAddress().then((res) => {
				if(res.data.code == 0)
				{
					//数据
					that.techn_last_address = res.data.data;
					//清空图片
					that.techn_last_images = [];
					//弹出框显示
					that.arrive_view_hidden = false;
				}
			});
		},
		/**
		 * 确认到达弹出框隐藏
		 */
		arriveViewHide:function()
		{
			var that = this;
			that.arrive_view_hidden = true;
		},
		/**
		 * 确认到达提交
		 */
		arriveFun:function()
		{
			//console.log('确认到达提交');
			var that = this;
			let formData = {
				order_id:that.order_id,
				techn_last_address:that.techn_last_address,
				techn_last_images:that.techn_last_images
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/arrive', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					that.load_order_detail(); //加载订单详情
					that.arriveViewHide(); //取消弹框
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 上传图片
		 */
		uploadImg:function()
		{
			var that = this;
			uni.chooseMedia({
				count:1,
				mediaType:['image'],
				sourceType:['camera'],
				sizeType:['compressed'],
				success:function(media_res)
				{
					if(media_res.errMsg == "chooseMedia:ok")
					{
						uni.showLoading({
							title:'上传中...',
							mask:true
						});
						let tempFilePath = media_res.tempFiles[0]['tempFilePath'];
						//网络请求
						uni.uploadFile({
							url:app.globalData.api_url+'/v1/publics/upload_images',
							filePath:tempFilePath,
							name:'file',
							formData:{
								'path':'order',
								'types':''
							},
							success:function(res)
							{
								uni.hideLoading();
								let data = JSON.parse(res.data);
								if(data.code == 0)
								{
									let techn_last_images = that.techn_last_images;
									techn_last_images = techn_last_images.concat(data.data.url);
									that.techn_last_images = techn_last_images;
								}else
								{
									uni.showToast({
										title:data.msg,
										icon:'none'
									});
								}
							}
						});
					}
				}
			});
		},
		/**
		 * 删除图片
		 */
		delImg:function(index)
		{
			var that = this;
			let techn_last_images = that.techn_last_images;
			techn_last_images.splice(index,1);
			that.techn_last_images = techn_last_images;
		},
		/**
		 * 开始服务
		 */
		startService:function()
		{
			//console.log('开始服务');
			var that = this;
			let formData = {
				order_id:that.order_id
			};
			uni.showModal({
				title: '温馨提示',
				content: '您确定开始服务吗？',
				confirmText: '确认',
				cancelText: '暂不',
				success: (result) => {
					if (result.confirm) {
						//网络请求
						request(app.globalData.api_url+'/v1/order/start_service', 'POST', formData).then((res) => {
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
							if(res.data.code == 0)
							{
								that.load_order_detail(); //加载订单详情
							}else
							{
								app.is_login_check(res.data);
								app.is_techn_check(res.data);
							}
						});
					}
				}
			});
		},
		/**
		 * 完成服务显示弹出框
		 */
		overViewShow:function(){
			//console.log('完成服务显示弹出框');
			var that = this;
			that.locateAddress().then((res) => {
				if(res.data.code == 0)
				{
					//数据
					that.techn_last_address = res.data.data;
					//弹出框显示
					that.over_view_hidden = false;
				}
			});
		},
		/**
		 * 完成服务隐藏弹出框
		 */
		overViewHide:function()
		{
			var that = this;
			that.over_view_hidden = true;
		},
		
		onContact(){
			this.$refs.popupRef.show();
		},
		/**
		 * 确认完成提交
		 */
		overFun:function(){
			var that = this;
			var that = this;
			let formData = {
				order_id:that.order_id,
				techn_last_address:that.techn_last_address,
				budan_reason:that.abnormalShow?that.causeVal:that.causeTitle,
				xing:that.xing,
				yuan:that.yuan,
			};
			console.log(formData)
			//网络请求
			request(app.globalData.api_url+'/v1/order/over', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					that.load_order_detail(); //加载订单详情
					that.overViewHide(); //服务完成弹出框隐藏
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
			// this.$refs.popupRef.show();
			//console.log('确认完成提交');
		},
		/**
		 * 拒绝接单
		 */
		noMeetFun:function(){
			//console.log('拒绝接单');
			var that = this;
			if(!that.reason){
				uni.showToast({
					title:'请输入拒单原因',
					icon:'none'
				});
				return
			}
			let formData = {
				order_id:that.order_id,
				reason:that.reason
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/no_meet', 'POST', formData).then((res) => {
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				});
				if(res.data.code == 0){
					that.load_order_detail(); //加载订单详情
				}else{
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
				that.refuseShow = false;
				that.reason = '';
				
			});
			// uni.showModal({
			// 	title: '温馨提示',
			// 	content: '您确定拒绝接单吗？',
			// 	confirmText: '确认',
			// 	cancelText: '暂不',
			// 	success: (result) => {
			// 		if (result.confirm) {
						
			// 		}
			// 	}
			// });
		},
		/**
		 * 立即补单
		 */
		repairFun:function()
		{
			//console.log('技师补单');
			var that = this;
			let formData = {
				order_id:that.order_id
			};
			//网络请求
			request(app.globalData.api_url+'/v1/repair/add', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					//调用支付
					that.repair_pay(res.data.data.order_id);
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 初始化微信登录code
		 */
		init_login_code:function()
		{
			var that = this;
			//获取登录code
			uni.login({
				success:function(login_res)
				{
					console.log(login_res);
					if(login_res.errMsg == "login:ok")
					{
						var code = login_res.code;
						that.code = code;
					}
				}
			});
		},
		deal_openid:function(order_id){
			request(app.globalData.api_url+'/v1/repair/deal_open_id', 'POST', {code:this.code}).then((res) => {
				if(res.data.code == 0)
				{
					that.repair_pay(order_id);
					console.log(res.data);
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
				}
			});
		},
		/**
		 * 技师补单调用支付
		 */
		repair_pay:function(order_id)
		{
			//console.log(order_id)
			if(order_id)
			{
				var that = this;
				//网络请求
				request(app.globalData.api_url+'/v1/repair/pay', 'POST', {order_id:order_id}).then((res) => {
					if(res.data.code == 0)
					{
						uni.requestPayment({
							provider:'wxpay',
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success:function(p_res)
							{
								that.load_order_detail(); //加载订单详情
							},
							fail:function()
							{
								uni.showToast({
									title:'支付失败',
									icon:'none'
								});
							}
						});
					}else
					{
						if(res.data.msg == 'OK-无效的openid'){
							that.init_login_code();
							that.deal_openid(order_id);
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
							app.is_login_check(res.data);
							app.is_techn_check(res.data);
						}
					}
				});
			}
		},
		/**
		 * 联系客户
		 */
		contactFun:function()
		{
			var that = this;
			//网络请求
			let formData = {
				order_id:that.order_id
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/contact_client', 'POST', formData).then((res) => {
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				});
				if(res.data.code == 0)
				{
					uni.makePhoneCall({
						phoneNumber:res.data.data.secretNo
					});
				}else
				{
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		lahei(){
			var that = this;
			let order_id = that.order_id;
			request(app.globalData.api_url+'/v1/move/lahei', 'POST', {order_id:order_id}).then((res) => {
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				});
				
			});
		}
    }
}
</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
/* radio 选中后的样式 */
/deep/.uni-radio-input-checked{
	background-color: rgb(36,201,107)!important;
	border-color: rgb(36,201,107)!important;
	background-clip: content-box!important;
	box-sizing: border-box;
}
.content{
	.order-pop{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index:1000;
		background-color:$uni-bg-color-mask;
		.pop-area{
			padding:30rpx;
			position: absolute;
			left:50rpx;
			right:50rpx;
			top:20%;
			background-color: #fff;
			border-radius: 20rpx;
			.pop-tit{
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
			}
			.pop-con{
				padding:30rpx 20rpx;
				font-size: 28rpx;
				.eva-star{
					margin-bottom: 10rpx;
					text{
						display: inline-block;
						margin-bottom: 20rpx;
						padding:5rpx 20rpx;
						border: 2rpx solid  $uni-text-color-grey;
						color: $uni-text-color-grey;
						font-size: 24rpx;
						border-radius: 20rpx;
						margin-right: 20rpx;
						&.eva-act{
							border: 2rpx solid $uni-text-color-active;
							color:$uni-text-color-active;
						}
					}
				}
				.eva-star1{
					margin-top:30rpx;
					text{
						color: #fff;
						background-color:$uni-text-color-active;
						border: 2rpx solid $uni-text-color-active;
					}
				}
				.place-rem-tit{
					display: flex;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					justify-content:space-between;
					text{
						display: inline-block;
						flex: 1;
						&:first-child{
							font-weight: bold;
						}
						&:last-child{
							font-size: 24rpx;
							color: $uni-text-color-grey;
						}
					}
				}
				.feed-tit{
					font-size:28rpx;
					margin-bottom: 10rpx;
					text{
						font-size: 20rpx;
						color: $uni-text-color-grey;
					}
				}
				.feed-con{
					margin-bottom:10rpx;
					.apply-img{
					  width: 150rpx;
					  height: 150rpx;
					  overflow: hidden;
					  display: inline-block;
					  position: relative;
					  margin:10rpx 10rpx 0 0;
					}
					.photo{
					  width: 150rpx;
					  height: 150rpx;
					}
					.del{
					  width: 30%;
					  position: absolute;
					  right:5rpx;
					  top: 5rpx;
					}
					.feed-text{
						padding:20rpx;
						font-size: 28rpx;
						border-radius: 20rpx;
						background-color: $uni-bg-color-grey;
					}
					.feed-input{
						margin: 20rpx 0 0;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 20rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						background-color: $uni-bg-color-grey;
					}
					text{
						width: 31%;
						height: 60rpx;
						font-size: 28rpx;
						margin: 10rpx 18rpx 10rpx 0;
						line-height: 60rpx;
						border-radius:30rpx;
						display: inline-block;
						text-align: center;
						background-color: $uni-bg-color-grey;
						&:nth-child(3n){
							margin: 10rpx 0 10rpx 0;
						}
						&.feed-act{
							color: #fff;
							background-color: $uni-text-color-active;
						}
					}
				}
			}
			.pop-btn{
				display: flex;
				text{
					margin:10rpx 20rpx 0;
					flex: 1;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					font-size: 28rpx;
					border:2rpx solid $uni-text-color-grey;
					color: $uni-text-color-grey;
					&:last-child{
						border:2rpx solid $uni-text-color-active;
						background-color:$uni-text-color-active;
						color: #fff;
					}
				}
			}
		}
	}
	.order-plan{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.order-no{
			margin-bottom:30rpx;
			text{
				font-size:28rpx;
				&:last-child{
					margin-left: 20rpx;
					color:$uni-text-color-active;
				}
			}
		}
		.tra-con {
			overflow: hidden;
			position: relative;
			&::before{
				content: " ";
				position: absolute;
				left:15rpx;
				top:12rpx;
				width:1rpx;
				bottom: 0;
				border-left:6rpx solid #ddd;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transform: scaleX(0.5);
				transform: scaleX(0.5);
			}
			.order-l{
				display: flex;
				margin-bottom:30rpx;
				.order-i {
					flex: 1;
					position: absolute;
					left:0;
					z-index: 100;
					text{
						background-color: #fff;
						&.icon-dui{
							color:$uni-text-color-active;
						}						
					}
				}
				.order-b{
					position: relative;
					flex: 5;
					left: 50rpx;
					.order-n{
						font-weight:bold;
						font-size:30rpx;
						margin-bottom: 10rpx;
					}
					.order-m{
						margin-top: 20rpx;
						image{
							width:250rpx;
							height:150rpx;
							margin:0 10rpx 5rpx;
						}
					}
					.order-t{
						font-size: 24rpx;
						color: $uni-text-color-grey;
					}
					.order-d{
						text{
							font-size: 24rpx;
							&::before{
								color:$uni-text-color-active;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
	.order-tp{
		height:300rpx;
		position: relative;
		.order-bg{
			width: 100%;
			height:150rpx;
			background-color: $uni-text-color-active;
			text{
				color: #fff;
				line-height:100rpx;
				margin-left:40rpx;
			}
		}
		.order-state{
			position: absolute;
			left: 0;
			right: 0;
			top:80rpx;
			display:flex;
			margin:30rpx 20rpx;
			padding:30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.order-li{
				flex: 1;
				text-align: center;
				.order-icon{
					text{
						margin-bottom: 10rpx;
						display: inline-block;
						font-size:40rpx;
						border-radius: 50%;
						padding: 20rpx;
						border:2rpx solid $uni-text-color-grey;
						color: $uni-text-color-grey;
					}
				}
				.order-name{
					font-size: 24rpx;
				}
			}
			.order-step{
				flex: 1;
				text-align: center;
				.order-icon{
					text{
						margin-bottom: 10rpx;
						display: inline-block;
						font-size:40rpx;
						border-radius: 50%;
						padding: 20rpx;
						border:2rpx solid$uni-text-color-active;
						color:$uni-text-color-active;
					}
				}
				.order-name{
					font-size: 24rpx;
					color:$uni-text-color-active;
				}
			}
		}
	}
	.tech-order{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		padding: 40rpx 10rpx;
		display: flex;
		justify-content: space-between;
		border-top:1px solid #eee;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		.tech-price{
			text{
				font-size:28rpx;
				&:last-child{
					font-weight: bold;
					color: #ff0000;
				}
			}
		}
		.tech-btn{
		   text{
		    margin-left: 20rpx;
		    padding:20rpx 30rpx;
		    color: #fff;
		    font-size:26rpx;
		    border-radius:16rpx;
		    background-color:$uni-text-color-active;
		    &.tech-act{
		     background: none;
		     border:2rpx solid $uni-text-color-grey;
		     color: $uni-text-color-grey;
		    }
		   }
		  }
	}
	.place-agree{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		radio{
			transform: scale(0.7);
		}
		text{
			color:$uni-text-color-active;
		}
	}
	.place-pay{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-pay-tp{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			border-bottom:1px solid #eee;
			padding-bottom:10rpx;
			margin-bottom:10rpx;
			.place-pay-name{
				flex:2;
				font-size:28rpx;
				position: relative;
				&::before{
					font-size:50rpx;
					position: absolute;
					top:0;
					color:$uni-text-color-active;
				}
				text{
					margin-left:60rpx;
				}
			}
			.place-pay-radio{
				flex: 1;
				text-align: right;
				transform: scale(0.7);
			}
		}
		.place-pay-bot{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-pay-name{
				flex:2;
				font-size:28rpx;
				position: relative;
				&::before{
					font-size:45rpx;
					position: absolute;
					top:0;
					color:$uni-text-color-active;
				}
				text{
					&:first-child{
						margin-left:60rpx;
					}
					&:last-child{
						font-size:24rpx;
						margin-left:10rpx;
						color: $uni-text-color-grey;
					}
				}
			}
			.place-pay-radio{
				flex: 1;
				text-align: right;
				transform: scale(0.7);
			}
		}
	}
	.place-rem{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-rem-tit{
			display: flex;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			justify-content:space-between;
			text{
				display: inline-block;
				flex: 1;
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
		}
		.place-rem-con{
			textarea{
				border-radius: 20rpx;
				font-size: 28rpx;
				padding: 20rpx;
				background-color:rgba(0, 0, 0, 0.05);
			}
		}
	}
	.dianhua{
		
		font-size:32rpx;
		color: white;
		// padding: 6rpx 10rpx;
		border-radius:10rpx;
		background: linear-gradient(to right, $uni-text-color-btn-left, $uni-text-color-btn-right);
		.tudianhua{
			display: inline-block;
			width:36rpx;
			height:32rpx;
			background: url('https://h5.hexukeji.com/techn_img/dianhua.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	.place-time{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-time-tp{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-time-name{
				flex: 1;
				font-size:28rpx;
				color: $uni-text-color-grey;
			}
			.place-time-name_sm{
				color: #838383
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				vertical-align: middle;
				text{
					font-size:28rpx;
				}
			}
		}
		.place-time-bt{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-time-name{
				flex: 1;
				font-size:28rpx;
				font-weight: bold;
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				text{
					&:first-child{
						font-size:28rpx;
						color:#ff0000;
					}
				}
				label{
					font-size: 28rpx;
					radio{
						transform: scale(0.7);
					}				
				}

			}
		}
		.place-km{
			margin-top:10rpx;
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}
	}
	.place-addr{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		.place-rem-tit{
			display: flex;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			justify-content: space-between;
			text{
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-active;
				}
			}
		}
		.place-name1{
			text{
				font-size:30rpx;
				font-weight: bold;
			}
		}
		.place-name{
		   margin-bottom: 0.3rem;
		   text{
		    &:nth-child(1){
		     font-size:30rpx;
		     font-weight: bold;
		    } 
		    &:nth-child(2){
		     margin-left: 20rpx;
		     font-size:28rpx;
		     color: rgb(119,119,119);
		    }
		    &:nth-child(4){
		     margin-left: 20rpx;
		     font-size:36rpx;
		     color: white;
		     border:1px solid $uni-text-color-active;
		     padding: 6rpx 10rpx;
		     border-radius:24rpx;
			 position: absolute;
			 background-color: #24c96b;
			 
		    }
		    &:nth-child(3){
		     margin-left: 20rpx;
		     font-size:28rpx;
		     color: $uni-text-color-active;
		    }
		   }
		  }
		.place-addr-con{
			font-size:28rpx;
			text{
				&:last-child{
					margin-left: 20rpx;
					font-size:28rpx;
					color: $uni-text-color-active;
				}
			}
		}
	}
	.tech-con{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: rgba(0, 0, 0, 0.1) 0 12rpx 12rpx;
		.tech-con-tp{
			display: flex;
			.tech-img{
				width:120rpx;
				height:120rpx;
				border-radius:50%;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
				}
			}
			.tech-int{
				flex:1;
				.tech-name{
					display: flex;
					flex: 2;
					.tech-photo{
						flex: 2;
						text{
							&:first-child{
								font-size: 32rpx;
								font-weight: bold;
								margin-right: 20rpx;
							}
							&:last-child{
								padding: 4rpx 8rpx;
								font-size:24rpx;
								border-radius: 10rpx;
								color: $uni-text-color-active;
								border:1px solid $uni-text-color-active;
							}
						}						
					}
					.tech-time{
						flex: 1.5;
						text-align: right;
						text{
							color: rgb(119,119,119);
							font-size: 24rpx;
							&:last-child{
								margin-left:4rpx;
								padding: 0 6rpx;
								color: $uni-text-color-active;
								background-color:#e3fffd;
								font-weight: bold;
							}
						}
					}
				}
				.tech-col{
					margin:16rpx 0;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					.tech-col-lf{
						text{
							&:first-child{
								color:#fb8100;
								margin-right:20rpx;
							}
						}
					}
					.tech-col-rt{
						text{
							font-size: 28rpx;
							&:before{
								color: $uni-text-color-active;
							}
						}
					}
				}
			}
		}
		.tech-con-bot{
			margin-top:20rpx;
			display: flex;
			.tech-state{
				width: 120rpx;
				text-align: center;
				margin-right: 20rpx;
				text{
					padding: 2rpx 16rpx;
					border-radius:20rpx;
					color: #fff;
					background-color: $uni-text-color-active;
					font-size:24rpx;
					&.tech-ser{
						background-color: #ff0000;
					}
				}
			}
			.tech-eva{
				display: flex;
				flex: 1;
				justify-content: space-between;
				.tech-eva-lf{
					text{
						color:rgb(119,119,119);
						font-size:28rpx;
						margin-right:18rpx;
						&.icon-xinheart118:before{
							color: $uni-text-color-active;
						}
					}
				}
				.tech-eva-rt{
					text{
						padding:6rpx 16rpx;
						border-radius:12rpx;
						color: #fff;
						background-color: $uni-text-color-active;
						font-size:28rpx;
					}
				}
			}
		}
	}

	.tech-eva-con{
		margin:30rpx 20rpx;
		border-radius:20rpx;
		padding:20rpx 30rpx;
		background-color: #fff;
		.place-rem-tit{
			font-size: 28rpx;
			margin: 20rpx 0;
			text{
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
		}
		.tech-eva-int{
			display: flex;
			padding-bottom:30rpx;
			border-bottom: 1px solid #eee;
			.tech-eva-img{
				width:100rpx;
				height:100rpx;
				border-radius:50%;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
				}
			}
			.tech-eva-rec{
				flex: 1;
				.tech-eva-tit{
					margin-bottom:10rpx;
					text{
						&:first-child{
							font-size: 32rpx;
							margin-right: 10rpx;
						}
						&:last-child{
							font-size:28rpx;
							color:rgb(119,119,119);
						}
					}
				}
				.tech-eva-des{
					font-size:24rpx;
					color:rgb(119,119,119);
				}
			}
		}
		.tech-eva-int1{
			display: flex;
			padding:30rpx 0;
			border-bottom: 1px solid #eee;
			.tech-eva-img1{
				width:60rpx;
				height:60rpx;
				border-radius:50%;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
				}
			}
			.tech-eva-rec1{
				flex: 1;
				.tech-eva-tit1{
					display: flex;
					margin-bottom:10rpx;
					justify-content: space-between;
					.tech-eva-tit-lf{
						text{
							&:first-child{
								font-size:28rpx;
								margin-right: 10rpx;
							}
							&.icon-xingxing{
								font-size:28rpx;
								color:#fb8100;
							}
						}							
					}
					.tech-eva-time{
						font-size: 24rpx;
						color:rgb(119,119,119);
						margin-top: 10rpx;
					}
				}
				.tech-eva-des1{
					font-size:28rpx;
					color:rgb(119,119,119);
					.tech-eva-tag{
						text{
							display: inline-block;
							font-size: 24rpx;
							border-radius: 20rpx;
							padding:6rpx 15rpx;
							margin:10rpx 10rpx 0 0;
							background-color:#eee;
						}
					}
					.tech-eva-des2{
						margin-top: 20rpx;
						font-size: 24rpx;
					}
				}
			}
		}
		.service{
			display: flex;
			padding:30rpx 10rpx;
			border-bottom:1px solid #eee;
			&:last-child{
				border-bottom:none;
			}
			.ser-img{
				width:160rpx;
				height:160rpx;
				border-radius: 14rpx;
				background-position:50%;
				background-repeat:no-repeat;
				background-size: cover;
				margin-right: 20rpx;
			}
			.ser-con{
				flex: 1;
				.ser-tit{
					display: flex;
					justify-content:space-between;
					text{
						&:first-child{
							font-weight: bold;
							font-size:30rpx;
						}
						&:last-child{
							font-size:24rpx;
							text-align: right;
							color: $uni-text-color-grey;
						}
					}
				}
				.ser-des{
					font-size:24rpx;
					color: $uni-text-color-grey;
					margin: 14rpx 0 18rpx;
				}
				.ser-pri{
					display: flex;
					.ser-pri-lf{
						flex: 2;
						text{
							&:first-child{
								padding: 0 6rpx;
								color:rgb(255,225,177);
								font-size:20rpx;
								background-color: #000;
							}
							&:nth-child(2){
								font-size:32rpx;
								font-weight: bold;
								color:#ff0000;
								margin: 0 2rpx 0 15rpx;
								&::before{
									content:"￥";
									font-weight: normal;
									font-size:24rpx;
								}
							}
							&:last-child{
								font-size:20rpx;
								text-decoration: line-through;
								color: $uni-text-color-grey;
							}
						}
					}
					.ser-pri-rt{
						flex: 1;
						text-align: right;
						text{
							&.icon-jianshao{
								font-size:34rpx;
								color: $uni-text-color-active;
							}
							&.num{
								margin: 0 20rpx;
								font-size:28rpx;
							}
							&.icon-node-add_fill{
								font-size:36rpx;
								color:$uni-text-color-active;
							}
						}
					}
				}
			}
		}
	}
	.detail-sel{
		padding: 20rpx;
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		text-align: center;
		.detail-btn{
			height:70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			color: #fff;
			font-size: 28rpx;
			background-color:$uni-text-color-active;
		}
	}
	.h110{
		width: 100%;
		height:130rpx;
	}
}
	::v-deep{
		.popup-content{
			border-top-left-radius:30rpx;
			border-top-right-radius:30rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
		}
	} 
	.box{
		padding: 30rpx;
		.name{
			font-size: 30rpx;
			font-weight: 600;
		}
		.mtt{
			margin-top: 30rpx;
			text-align: center;
			.money{
				font-size: 42rpx;
				color: #000;
			}
		}
		.cause{
			margin-top: 40rpx;
			.cause_title{
				font-size: 34rpx;
				color: #000;
				margin-bottom: 30rpx;
				text-align: center;
			}
			ul{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				li{
					background-color: #f7f7f7;
					font-size: 26rpx;
					line-height: 26rpx;
					margin-right: 16rpx;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
				}
			}
			.textarea{
				height: 200rpx;
				textarea{
					background-color: #f7f7f7;
					width: 94%;
					height: 81%;
					padding: 20rpx;
					font-size: 26rpx;
				}
			}
			.but{
				background-color: #38c763;
				background:linear-gradient(to right,$uni-text-color-btn-left,$uni-text-color-btn-right);
				width: 80%;
				height: 100rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin:50rpx auto 0;
				text{
					color: #fff;
					font-size: 30rpx;
					line-height: 30rpx;
					letter-spacing: 2rpx;
				}
			}
			.cur{
				border: #38c763 solid 2rpx;
				color: #38c763;
			}
			.unusual{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				padding-bottom: 1rpx;
				image{
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
				text{
					color: #ff4b4c;
					font-size: 26rpx;
					line-height: 26rpx;
				}
			}
		}
	
	}
	.popup-bg{
	      width: 100%;
	      height: 100%;
	      position: fixed;
	      top: 0;
	      bottom: 0;
	      background-color: rgba(1,1,1,0.3);
		  z-index: 999;
	}
	.popup-cont{
		  z-index: 1000;
	      width: 80%;
	      height: auto;
	      position: fixed;
	      top: 50%;
	      left: 50%;
	      transform: translate(-50%, -50%);
	      border-radius: 12rpx;
	      background-color: #ffffff;
		  padding-top: 40rpx;
		  .title{
			  text-align: center;
			  padding: 0 30rpx 30rpx;
			  font-size: 30rpx;
			  color: #222;
			  font-weight: 600;
		  }
		  .input{
			  margin: auto;
			  width: 80%;
			  height: 100rpx;
			  border-radius: 10rpx;
			  border: 2rpx solid #eee;
			  padding: 30rpx;
			  .placeholder{
				  font-size: 28rpx;
			  }
			  textarea{
				  font-size: 28rpx;
				  width: 100%;
				  height: 100%;
			  }
		  }
		  .popup-but{
			  display: flex;
			  align-items: center;
			  justify-content: space-around;
			  padding: 40rpx 0;
		  }
		  .cancel ,.define{
			  width: 160rpx;
			  height: 60rpx;
			  color: #fff;
			  border-radius: 10rpx;
			  font-size: 28rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
		  }
		  .cancel{
			  background-color: #999;
		  }
		  .define{
			  background-color: #24c96b;
			  background:linear-gradient(to right,$uni-text-color-btn-left,$uni-text-color-btn-right);
		  }
		  .rule{
			  view{
				  padding: 10rpx 0;
			  }
		  }
	}
</style>